<template>
	<view class="buy_order_page">
		
		<view class="tabs_box_fix">
			<view class="puplic_tabs_list">
				<view class="active item_tabs"><view class="txt_sty">全部</view></view>
				<view class="item_tabs"><view class="txt_sty">待支付</view></view>
				<view class="item_tabs"><view class="txt_sty">代发货</view></view>
				<view class="item_tabs"><view class="txt_sty">待收货</view></view>
				<view class="item_tabs"><view class="txt_sty">已完成</view></view>
				<view class="item_tabs"><view class="txt_sty">售后中</view></view>
			</view>
		</view>
		
		<view class="buy_order_content">
			
			<view class="search_box">
				<input type="text" class="search_ipt" placeholder-style="color: #999" placeholder="请搜索您购买的游戏名称" />
				<image src="@/static/images/icon_search.png" class="icon_search_pos"></image>
			</view>
			
			<view class="buy_area_block_1">
				
				<view class="pt20 pb20 bb1 flex_box aic">
					
					<view class="item ov">
						<view class="df aic fs24 cor_666">
							<view class="mr10">XC202505121623573598937312</view>
							<up-copy content="XC202505121623573598937312">
								<view class="fs24">[复制]</view>
							</up-copy>
						</view>
					</view>
					<view class="fs24 cor_F52">售后中</view>
				</view>
				<view class="mt24 flex_box">
					<view class="re mr15"><image src="@/static/images/banner_01.png" class="pic_size"></image></view>
					<view class="item ov">
						<view class="df hp100 fldc jcsb">
							<view class="flex_box aic">
								<view class="item ov"><view class="fs28 fwb cor_333 clamp_2">塞尔达 荒野之息</view></view>
								<view class="ml10 fs32 cor_999">¥ 238元</view>
							</view>
							<view class="flex_box aic fs24 cor_999">
								<view class="item ov"><view class="clamp_1">裸卡简装，中文，非国行</view></view>
								<view class="">X1</view>
							</view>
							<view class="fs24 cor_999">下单日期：2025-05-12</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="buy_area_block_1" v-for="(item, index) in 5" :key="index">
				
				<view class="pt20 pb20 bb1 flex_box aic">
					
					<view class="item ov">
						<view class="df aic fs24 cor_666">
							<view class="mr10">XC202505121623573598937312</view>
							<up-copy content="XC202505121623573598937312">
								<view class="fs24">[复制]</view>
							</up-copy>
						</view>
					</view>
					<view class="fs24 cor_333">已关闭</view>
				</view>
				<view class="mt24 flex_box">
					<view class="re mr15"><image src="@/static/images/banner_01.png" class="pic_size"></image></view>
					<view class="item ov">
						<view class="df hp100 fldc jcsb">
							<view class="flex_box aic">
								<view class="item ov"><view class="fs28 fwb cor_333 clamp_2">塞尔达 荒野之息</view></view>
								<view class="ml10 fs32 cor_999">¥ 238元</view>
							</view>
							<view class="flex_box aic fs24 cor_999">
								<view class="item ov"><view class="clamp_1">裸卡简装，中文，非国行</view></view>
								<view class="">X1</view>
							</view>
							<view class="fs24 cor_999">下单日期：2025-05-12</view>
						</view>
					</view>
				</view>
				
			</view>
			
			
			
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
</script>

<style lang="scss" scoped>
	
	.buy_order_page {
		position: relative;
		padding-top: 88rpx;
		padding-bottom: calc(30rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		min-height: 100vh;
		background-color: #f6f6f6;
		.tabs_box_fix {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 5;
		}
		.buy_order_content {
			position: relative;
			padding: 0 24rpx;
			.search_box {
				position: relative;
				margin-top: 24rpx;
				margin-bottom: 24rpx;
				.search_ipt {
					position: relative;
					display: inline-block;
					width: 100%;
					padding: 0 30rpx 0 64rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 24rpx;
					color: #333;
					text-align: left;
					background-color: #fff;
					border: 1px solid #F0AAB5;
					border-radius: 16rpx;
					outline: none;
					vertical-align: middle;
				}
				.icon_search_pos {
					position: absolute;
					top: 50%;
					left: 26rpx;
					width: 25rpx;
					height: 25rpx;
					margin-top: -10rpx;
					vertical-align: middle;
					z-index: 2;
				}
			}
			.buy_area_block_1 {
				position: relative;
				padding: 0 32rpx 40rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				.pic_size {
					position: relative;
					width: 200rpx;
					height: 124rpx;
					border-radius: 16rpx;
					vertical-align: middle;
				}
			}
		}
	}

</style>
